<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>黑马商城购物车</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js" type="text/javascript"></script>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
			
			font {
				color: #3164af;
				font-size: 18px;
				font-weight: normal;
				padding: 0 10px;
			}
			
			.layui-table-cell{
			       height:auto!important;
			 }
		</style>
		
		

		
		<script type="text/javascript">
			function delProFromCart(pid) {
				if(confirm("您是否要删除该项？")){
					location.href="${pageContext.request.contextPath}/product?method=delProFromCart&pid="+pid;
				}
			}
			function clearCart() {
				if(confirm("您是否要清空购物车？")){
					location.href="${pageContext.request.contextPath}/product?method=clearCart";
				}
			}
		</script>
	</head>

	<body>
		
		<div class="container">
			
			<div id="header"></div>
			
			<div class="row">
    <!-- 判断购物车中是否还有商品 -->
   
    
				<div style="margin:0 auto; margin-top:10px;width:;">
					<strong style="font-size:16px;margin:5px 0;">订单详情</strong>
					
					<div id="cartTable">
					<p>在此创建数据表格显示购物车</p>
					<table id="demo"></table>
					</div>
					<!-- 表格行工具 -->
					<div id="rowTools" style="display: none">
						<button class="layui-btn layui-btn-sm layui-btn-danger">删除商品</button>
					</div>
					
				</div>
			</div>
			
			
			<div class="jiesuandan mt20 center">
	
				<div class="jiesuan fr">
				
				    
					<div class="jiesuanjiage fl">合计（不含运费）：<input type="hidden" id="sum" name="sum" /><span class="suan" name="jiesuan012" id="mei">0.00</span></div>
					<div class="jsanniu fr">
						<button id="checkout" class="jsan" name="jiesuan"  value="去结算">去结算</button>
					</div>
					<div class="clear"></div>
					
				</div>
				<div class="clear"></div>
			</div>




		</div>
			
		<div>
			<img alt="" src="/images/cart-empty.png">
			<a href="">返回首页</a>
		</div>
			
		<div id="footer"></div>
	</body>

</html>

<script src="https://www.layuicdn.com/layui/layui.all.js"></script>

<script type="text/javascript">
//声明一个js参数，用来取得地址栏
function getUrlSearch(name) {
  // 未传参，返回空
  if (!name) return null;
  // 查询参数：先通过search取值，如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数，返回空
  if (!after) return null;
  // 如果查询参数中没有"name"，返回空
  if (after.indexOf(name) === -1) return null;
 
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时，需要解码，不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值，返回空
  if (!r) return null;
  return r[2];
}

</script>


<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');



</script>


<script type="text/javascript">

layui.use(['form','jquery','laypage','table'], function(){
	var $=layui.jquery;
	var table=layui.table;
	var layer=layui.layer;
	
	//得到地址栏的uid
	var uid=getUrlSearch('uid');
	var page=getUrlSearch('page');
	layer.alert(uid);
	//发送layui数据表格的请求加载数据
	var obj={
			    elem: '#demo'
			    ,height: 312
			    ,url: '/heima/showMyCart?uid='+uid+'&page='+page //数据接口
			    ,page: true //开启分页
			    ,totalRow:true  //开启统计总价
			    ,cols: [[ //表头
			       {checkbox:true}
			      ,{field: 'gid', title: '商品id'}
			      ,{field: 'uid', title: '用户id'}
			      ,{field: 'gname', title: '商品名称'}
			      ,{field: 'gphoto', title: '商品图片',templet: stateFormat} 
			      ,{field: 'gprice', title: '价格',totalRow:true}
			      ,{field: 'count', title: '总数'}
			      ,{toolbar:'#rowTools'}//表格的行工具
			    ]] 
		};
	//加载表格
	
	table.render(obj);
	
	
	
	
	//点击结算事件
	$("#checkout").click(function (){
		//得到当前uid
		uid=getUrlSearch('uid');
		//发送ajax请求将uid传到controller
		$.post('/heima/checkoutCart',{"uid":uid},function(data){
			layer.msg(data);
		},'text');
		
		return false;
	});
	
	
	//加载购物车总价到结算栏  id="mei"
	$.post('/heima/getCartTotal',{"uid":uid},function(data){
		$("#mei").html(data+"元");
	},'text');
	
	
});


function  stateFormat(d){
	 var str = '<img src='+d.gphoto+' />';
	 return str ;
}
</script>
